<template>
	<view class="gasbottle-inspect-page">
		<scroll-view style="height: 100%;" @scrolltolower="lower">
			<view class="list-item" v-for="(item,i) in list" :key="i" @click="onItemClick(item)">
				<view class="title c-flex jc-between">
					<text class="time">送达时间：{{item.arrivalTime}}</text>
					<text class="status" :class="{'status-0':item.patrolResult == 0,
												 'status-1':item.patrolResult == 1,
												 'status-2':item.patrolResult == 2,
												 }">
												 {{getName(item.patrolResult)}}
					</text>
				</view>
				<view class="content c-flex c-flex-col">
					<view class="c-item"><text>客户信息：</text><text>{{item.lpgUserName}}-{{item.lpgUserPhone}}</text></view>
					<view class="c-item"><text>用户地址：</text><text>{{item.lpgUserAddress}}</text></view>
					<view class="c-item"><text>安检人员：</text><text>{{item.staffName}}</text></view>
				</view>
			</view>
		</scroll-view>
		<view class="no-data">
			<no-data v-if="list.length == 0" ></no-data>
		</view>
	</view>
</template>

<script>
	import NoData from '@/components/no-data/no-data-v1.vue';
	import {GAS_BOTTLE_INSPECT_TYPE} from '@/utils/global.js';
	import {getNameByType} from '@/utils/utils.js';
	export default{
		components:{NoData},
		data(){
			return {
				list:[],
				page:1,
				limit:10,
				total:0,
				isLoadMore:false,
			}
		},
		methods:{
			//查询入户安检信息
			initData(qrCode){
				uni.showLoading({title:'加载中'})
				this.$API.findInspectInfo({qrCode:qrCode}).then(res=>{
					uni.hideLoading();
					if (this.page !== 1) {
						this.list = this.list.concat(res.page.list || [])
					} else {
						this.list = res.page.list || [];
					}
					this.total = res.page.totalCount;
					uni.stopPullDownRefresh(); //关闭加载动画
					if (this.list.length == this.total) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
						this.isLoadMore = true
						this.loadStatus = 'nomore'
					} else {
						this.isLoadMore = false
					}
				});
			},
			getName(val){
				return getNameByType(GAS_BOTTLE_INSPECT_TYPE,val)
			},
			lower(){
				if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
					if (this.total > (this.limit * this.page)) {
						this.isLoadMore = true;
						this.page += 1
							this.initData();	
						}
				}
			},
			onItemClick(item){
				const picArr = item.attachments ? item.attachments.split(','):[];
				const obj = {id:item.orderId,sign:item.sign,lpgUserType:item.lpgUserType};
				uni.navigateTo({
					url:'/pages/delivery/room-check/room-check-detail?item='+JSON.stringify(obj)+'&picArr='+ JSON.stringify(picArr) +'&type=order'
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.gasbottle-inspect-page{
		.list-item{
			padding:32rpx 24rpx;background: #FFFFFF;border-radius: 16rpx;margin: 0 0rpx 20rpx;
			.title{
				margin-bottom: 36rpx;
				.time{font-weight: 600;font-size: 30rpx;color: #333333;}
				.status{display: inline-block;font-weight: 500;font-size: 24rpx;color: #FFFFFF;width: 104rpx;height: 42rpx;line-height: 42rpx;text-align: center;transform: skew(-10deg);}
				.status-1{background: linear-gradient( 180deg, #19C132 0%, #14A92A 100%);border-radius: 8rpx;}
				.status-0{background: linear-gradient( 180deg, #F9C373 0%, #FF9A16 100%);border-radius: 8rpx;}
				.status-2{background: linear-gradient( 180deg, #FF825B 0%, #FF433B 100%);border-radius: 8rpx;}
				.status-3{background: linear-gradient( 180deg, #999999 0%, #999999 100%);border-radius: 8rpx;}
			}
			.content{
				gap:26rpx;
				.c-item{
					text:first-child{color:#666666;font-size:26rpx;font-weight: 400;}
					text:last-child{color:#333333;font-size:26rpx;}
				}
			}
		}
		.no-data{margin-top: 50%;}
	}
</style>